import 'dart:convert';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'package:study_online/entity/CourseItemEn.dart';
import 'package:study_online/global/colors.dart';

import 'package:flutter/material.dart';

import '../HomeModel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //appBar: AppBar(
        //  backgroundColor: Colors.black26,
        //  title: Text('container'),
        //),
        body: InformationScienceTab(),
      ),
    );
  }
}

class InformationScienceTab extends StatefulWidget {
  InformationScienceTab({Key key}) : super(key: key);

  @override
  _InformationScienceTabState createState() => _InformationScienceTabState();
}

class _InformationScienceTabState extends State<InformationScienceTab> {
  CourseItemEnList _courseItemEnList;
  CourseItemEn _courseItemEn;
  List<CourseItemEn> _androidData = [], _blockChainData = [], _linuixData = [];

  @override
  void initState() {
    super.initState();
    _loadData();
    // _courseItemEn = new CourseItemEn(
    //     '四六级专题',
    //     188.0,
    //     'https://img1.baidu.com/it/u=3396838262,522903359&fm=26&fmt=auto&gp=0.jpg',
    //     1,
    //     300);
    // _androidData.add(_courseItemEn);
    // _androidData.add(_courseItemEn);
    // _androidData.add(_courseItemEn);
    // _androidData.add(_courseItemEn);
    // _blockChainData.add(_courseItemEn);
    // _blockChainData.add(_courseItemEn);
    // _blockChainData.add(_courseItemEn);
    // _blockChainData.add(_courseItemEn);
    // _linuixData.add(_courseItemEn);
    // _linuixData.add(_courseItemEn);
    // _linuixData.add(_courseItemEn);
    // _linuixData.add(_courseItemEn);
  }

  void _loadData() async {
    Response response = await getInformationScienceCourse();
    print("###" + response.toString());
    var responseData = json.decode(response.toString());
    setState(() {
      _courseItemEnList = CourseItemEnList.formJson(responseData);
      for (int i = 0; i < 4; ++i) {
        _androidData.add(_courseItemEnList.data[i]);
      }
      for (int i = 4; i < 8; ++i) {
        _blockChainData.add(_courseItemEnList.data[i]);
      }
      for (int i = 8; i < 12; ++i) {
        _linuixData.add(_courseItemEnList.data[i]);
      }
    });
  }

  Widget _titleWidget(value, num) {
    return Container(
      margin: EdgeInsets.fromLTRB(
        ScreenUtil().setWidth(46),
        ScreenUtil().setHeight(50),
        ScreenUtil().setWidth(0),
        ScreenUtil().setHeight(0),
      ),
      height: ScreenUtil().setHeight(74),
      child: Stack(
        children: [
          Positioned(
            bottom: 0,
            left: 0,
            child: Container(
              height: ScreenUtil().setHeight(14),
              width: ScreenUtil().setWidth(47) * num,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(
                    Radius.circular(ScreenUtil().setHeight(7))),
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.center,
                  stops: [0.0, 1.0],
                  colors: [AppColors.primary, Color(0x542DCA97)],
                ),
              ),
            ),
          ),
          Positioned(
            left: 0,
            top: 0,
            child: Text(
              value,
              style: TextStyle(
                fontSize: ScreenUtil().setSp(52),
                color: Colors.black,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            right: 0,
            child: Padding(
              padding: EdgeInsets.only(right: ScreenUtil().setWidth(35)),
              child: Text(
                '查看全部>',
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(45),
                  color: AppColors.subtext,
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _specializedCoursewidget(context) {
    return Wrap(
      //spacing: ScreenUtil().setWidth(35),
      children: [
        InkWell(
          onTap: () {
            Navigator.pushNamed(context, 'computerScience');
          },
          child: Container(
            width: ScreenUtil().setWidth(200),
            height: ScreenUtil().setHeight(200),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                ClipOval(
                  child: Image.asset(
                    'assets/img/jike.png',
                    width: ScreenUtil().setHeight(130),
                    height: ScreenUtil().setHeight(130),
                    fit: BoxFit.fitHeight,
                  ),
                ),
                Text(
                  '计科',
                  style: TextStyle(
                    fontSize: ScreenUtil().setSp(34),
                    color: Colors.black,
                  ),
                ),
              ],
            ),
          ),
        ),
        Container(
          width: ScreenUtil().setWidth(200),
          height: ScreenUtil().setHeight(200),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset(
                'assets/img/yixin1.png',
                width: ScreenUtil().setHeight(110),
                height: ScreenUtil().setHeight(110),
                fit: BoxFit.cover,
              ),
              Text(
                '医信',
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(34),
                  color: Colors.black,
                ),
              )
            ],
          ),
        ),
        Container(
          width: ScreenUtil().setWidth(200),
          height: ScreenUtil().setHeight(200),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset(
                'assets/img/xinguan.png',
                width: ScreenUtil().setHeight(105),
                height: ScreenUtil().setHeight(105),
                fit: BoxFit.fitHeight,
              ),
              Text(
                '信管',
                style: TextStyle(
                  fontSize: ScreenUtil().setSp(34),
                  color: Colors.black,
                ),
              )
            ],
          ),
        ),
      ],
    );
  }

  Widget _courseListWidget(List<CourseItemEn> courseItemEnList) {
    return Container(
      height: ScreenUtil().setHeight(486),
      //width: double.infinity,//宽度自适应
      padding: EdgeInsets.all(ScreenUtil().setWidth(20)),
      child: ListView.builder(
        scrollDirection: Axis.horizontal, //设置水平列表
        itemBuilder: (context, index) {
          var itemWidth = (ScreenUtil().screenWidth - 120) / 2;
          return InkWell(
            onTap: () {
              Navigator.pushNamed(context, 'courseDetail', arguments: [
                courseItemEnList[index].name,
                courseItemEnList[index].cover,
                courseItemEnList[index].price,
                courseItemEnList[index].couId,
              ]);
            },
            child: Container(
              width: itemWidth, //实现在wrap中平铺,高度自适应
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(8)),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black26,
                    offset: Offset(-1, 1.0),
                    blurRadius: 1.0,
                    spreadRadius: 0.6,
                  ),
                ],
              ),
              margin: EdgeInsets.all(10),
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    child: AspectRatio(
                      aspectRatio: 2 / 1, //防止服务器返回的图片高度不一致
                      child: ClipRRect(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(8),
                          topRight: Radius.circular(8),
                        ),
                        child: Image.network(
                          courseItemEnList[index].cover,
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                  ),
                  SizedBox(
                    height: ScreenUtil().setHeight(20),
                  ),
                  Align(
                    alignment: Alignment.bottomLeft,
                    child: Text(
                      courseItemEnList[index].name,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.black54,
                      ),
                    ),
                  ),
                  Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(
                        top: ScreenUtil().setHeight(20),
                      ),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Align(
                            alignment: Alignment.topLeft,
                            child: Text(
                              '￥${courseItemEnList[index].price.toString()}',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: ScreenUtil().setSp(45),
                              ),
                            ),
                          ),
                          Expanded(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Icon(
                                  Icons.group_sharp,
                                  size: ScreenUtil().setSp(45),
                                  color: Colors.black54,
                                ),
                                SizedBox(
                                  width: ScreenUtil().setWidth(18),
                                ),
                                Text(
                                  '${courseItemEnList[index].num}',
                                  style: TextStyle(
                                    fontSize: ScreenUtil().setSp(45),
                                    color: Colors.black38,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
        itemCount: 4,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    //debugPaintSizeEnabled = true;
    ScreenUtil.init(
      BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width,
          maxHeight: MediaQuery.of(context).size.height),
      designSize: Size(1080, 2340),
    );
    if (_courseItemEnList==null) {
      return Container(
        width: 0,
        height: 0,
      );
    } else {
      return ListView(
        children: [
          _titleWidget('专业课', 3),
          SizedBox(
            height: ScreenUtil().setHeight(30),
          ),
          _specializedCoursewidget(context),
          _titleWidget('区块链', 3),
          _courseListWidget(_blockChainData),
          _titleWidget('android', 3.4),
          _courseListWidget(_androidData),
          _titleWidget('Linuix运维', 4.5),
          _courseListWidget(_linuixData),
        ],
      );
    }
  }
}
